<template>
  <div class="gameContent-body">
    <backTo-view :child-msg="current"></backTo-view>
    <!--<div class="header comheader">
      <i class="i-back"></i>
      <span>最近更新</span>
      <div class="fr">
        <input type="text" class="xs-search" />
        <i class=" i-home"></i>
      </div>
    </div>-->
    <div class="down">
      <div class="cf">
        <img :src="dataList.imgUrlIcon" alt="" class="fl" />
        <div class="fl">
          <p class="font28 text-left">{{dataList.name}}</p>
          <div class="font20 mtb5">
            <span>吃鸡</span>
            <span>求生</span>
            <span>多人联机</span>
            <span>冒险</span>
          </div>
          <p class="font24 text-left">有<span class="green">23.34</span>万人在玩</p>
        </div>
      </div>
      <div class="btn">
        <a :href="dataList.downloadUrl" download="childMsg.name">
          高速下载
        </a>
      </div>
    </div>
    <div class="com-nav">
      <ul class="cf">
        <li :class="{active:flag}" @click="select"> 游戏介绍 </li>
        <li :class="{active:!flag}" @click="select"> 游戏评论 </li>
      </ul>
    </div>
    <div class="nav-content cf">
      <!--游戏介绍-->
      <div class="intro content1" :class="{display:flag}">
        <div class="bgfff pt20">
          <p class="font32 bold pl20 text-left">温馨提示 / 修改了什么</p>
          <p class=" font28 pl20 text-left margin_b">修改特性：免谷歌，无广告，无限金币</p>
          <!--<div class="carousel">-->
            <!--<img :src="item" alt="" v-for="(item, index) in imglist" :key="index">-->
          <!--</div>-->
          <div class="carousel">
            <ul class="img-box">
              <li v-for="(item, index) in imglist" ><img :src="item" alt="" :key="index" class="img-h"></li>
            </ul>
          </div>
          <div class="pd20 cf text-left">
            <p class="font32 bold">游戏简介</p>
            <p class="font28" v-html="dataList.introduce">
<!--
              找到恐怖分子，完成组织交给你的各种任务。提升你的射击技巧，成为射击King。选择，升级你的狙击枪，获得不同的射击体验。真实的战场环境。真实的射击体验。
-->
            </p>
            <!--<div class="fr green">+展开</div>-->
          </div>
          <div class="pd20 cf text-left">
            <p class="font32 bold">更新说明</p>
            <!--<div>
              找到恐怖分子，完成组织交给你的各种任务。提升你的射击技巧，成为射击King。选择，升级你的狙击枪，获得不同的射击体验。真实的战场环境。真实的射击体验。
            </div>-->
            <!--<div class="fr green">+展开</div>-->
          </div>
          <div class="pd20 cf text-left">
            <p class="font32 bold ">返利说明</p>
            <div class="font28">
              单日累计充值100~599元，可获得50%返利 单日累计充值600~1099元，可获得70%返利 单日累计充值1100~3099元，可获得100%返利 单日累计充值3100~5099元，可获得140%返利 单日累计充值3100~5099元，可获得140%返利
            </div>
            <!--<div class="fr green">+展开</div>-->
          </div>
          <div class="pd20 cf text-left">
            <p class="font32 bold ">详细信息</p>
            <div class="font28">
              <span>更新：</span> <span>{{dataList.version}}</span>
            </div>
            <div class="font28">
              <span>大小：</span> <span>{{dataList.gameSize}}</span>
            </div>
            <div class="font28">
              <span>版本：</span> <span>{{dataList.developer}}</span>
            </div>
            <div class="font28">
              <span>语言：</span> <span>{{dataList.developer}}</span>
            </div>
            <div class="font28">
              <span>作者：</span> <span>{{dataList.developer}}</span>
            </div>
          </div>
        </div>

        <!--<div class="pd20 cf">
          <p class="font32 bold">更新说明</p>
          <div class="font28">
            找到恐怖分子，完成组织交给你的各种任务。提升你的射击技巧，成为射击King。选择，升级你的狙击枪，获得不同的射击体验。真实的战场环境。真实的射击体验。
          </div>
          <div class="fr green">+展开</div>
        </div>
        <div class="pd20 cf">
          <p class="font32 bold">返利说明</p>
          <div class="font28">
            单日累计充值100~599元，可获得50%返利 单日累计充值600~1099元，可获得70%返利 单日累计充值1100~3099元，可获得100%返利 单日累计充值3100~5099元，可获得140%返利 单日累计充值3100~5099元，可获得140%返利 </div>
          <div class="fr green">+展开</div>
        </div>-->

        <!--热门推荐-->
        <div class="hot">
          <div class="title pl20">热门推荐</div>
          <div class="content">
            <ul class="cf">
              <li v-if=" index < 4"  v-for="(item, index) in list.weekhot" :key="item.id" @click="toDetail(item.id)">
                <img :src="item.imgUrlIcon" alt="" />
                <p>{{item.name}}</p>
              </li>
            </ul>
          </div>
        </div>
        <!--同类推荐-->
        <div class="recommend">
          <div class="title">同类推荐</div>
          <div class="content">
            <ul class="cf">
              <introduceList-view @toDetail="toDetail" v-if=" index < 6"  :child-msg="item" v-for="(item, index) in list.recommend" :key="item.id"></introduceList-view>
              <!--<li class="cf">
                <div class="fl ">
                  <img src="img/hyxd.png" alt="" class="fl" />
                  <div class="fl ">
                    <p class="font28">游戏虫APP下载</p>
                    <p>43384人在玩<span>134.6M</span></p>
                    <p>（一句话描述）全新地图 高清新版</p>
                  </div>
                </div>
                <div class="fr downDtn ">
                  下载
                </div>
              </li>-->
            </ul>
          </div>
        </div>
        <!--<div class="more">+ 查看更多</div>-->
      </div>
      <!--游戏评论-->
      <div class="comment content1"  :class="{display:!flag}">
        <div class="bgfff pt20">
          <div class="flex_b">
            <span class="score">9.6</span>
            <div class="flex_a">
              <p>1639人参与了评论</p>
              <p>好评率<span class="rate">78%</span></p>
            </div>
            <a class="flex_a down-btn" href="">安装APP评论</a>
          </div>
          <div class="coms">
            <button class="all">全部</button>
            <button class="com">好评111</button>
            <button class="com">中评111</button>
            <button class="com">差评111</button>
          </div>
        </div>
        <div class="hot">
          <div class="flex_b">
            <img src="" class="head-portrait">
            <div class="flex_a">
              <h3>苏曼青</h3>
              <p><img src="../../static/img/xingxing.png" class="star-icon" v-for="(item,index) in 4" :key="index"></p>
            </div>
            <span class="flex_a date">2018.04.23 09:32</span>
          </div>
          <div class="comment-content">这是评论这是评论这是评论这是评论这是评论这是评论这是评论</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import introduceList from '../components/introduceList.vue'
import backTo from '../components/backTo.vue'
export default {
  name: 'detail',
  components: {
    'introduceList-view': introduceList,
    'backTo-view': backTo
  },
  inject: ['reload'],
  data () {
    return {
      current: '详情',
      flag: true,
      list: {},
      imglist: [],
      dataList: {
        commentList: [
          {
            id: '14242',
            name: '苏慕路',
            date: '2018-05-08',
            imgUrlIcon: '/static/img/left.png',
            gameScore: '5',
            comment: '这是评论这是评论这是评论这是评论这是评论这是评论这是评论'
          },
          {
            id: '32323',
            name: '无名',
            date: '2018-05-08',
            imgUrlIcon: '/static/img/left.png',
            gameScore: '5',
            comment: '这是评论这是评论这是评论这是评论这是评论这是评论这是评论'
          },
          {
            id: '1w31',
            name: '无名',
            date: '2018-05-08',
            imgUrlIcon: '/static/img/left.png',
            gameScore: '5',
            comment: '这是评论这是评论这是评论这是评论这是评论这是评论这是评论'
          }
         ]
      }
    }
  },
  computed: {
    /* imglist: function () {
      return this.dataList.imgUrlBig.split('|').join('')
    } */
  },
  watch: {
    $route (to, from) {
      // 执行ajax请求，但只希望在进入时请求，离开时不希望进行请求。
    }
  },
  methods: {
    toDetail (id) {
      // this.reload()
      this.$router.push({path: '/detail', query: {userId: id}})
      let detailAPI = '/game/details/' + id
      let that = this
      // 此地有传auth(token)认证 为空就不会执行
      this.$request.get(detailAPI, false,
        function (res) {
          if (res.data.code === 1000) {
            that.dataList = res.data.rst
            that.imglist = that.dataList.imgUrlBig.split('|')
          }
        }
      )
    },
    select () {
      this.flag = !this.flag
    }
  },
  created () {
    let detailAPI = '/game/details/' + this.$route.query.userId
    let that = this
    // 此地有传auth(token)认证 为空就不会执行
    this.$request.get(detailAPI, false,
      function (res) {
        if (res.data.code === 1000) {
          that.dataList = res.data.rst
          that.imglist = that.dataList.imgUrlBig.split('|')
        }
      }
    )
    let homeAPI = '/h5/homePage'
    this.$request.get(homeAPI, false,
      function (res) {
        if (res.data.code === 1000) {
          that.list = res.data.rst
        }
      }
    )
  },
  mounted: function () {
    // console.log(this.imglist)
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      // console.log(vm)
    })
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  }
}
</script>
<style scoped>
  .btn a{
    color: #FFFFFF;
    width:100%;
    display:inline-block;
  }
  .text-left{
    text-align: left;
  }
  .carousel{
    position:relative;
    height:280px;
    overflow:hidden;
    white-space:nowrap;
    margin:0;
  }
  .img-box{
    overflow-x: auto;
    height:280px;
    overflow-y:hidden;
    white-space: nowrap;
    font-size:0;
    text-align: left;
    margin:0 0.2667rem;
  }
  .img-box>li{
    display: inline-block;
    position: relative;
    height: 100%;
    padding-right: 10px;
    vertical-align: middle;
  }
  .img-box>li:last-child{
    padding-right:0;
  }
  .img-box .img-h{
    height:100%;
    width:auto;
    font-size:0;
    white-space:nowrap;
  }
  .nav-content .content1{
    display:none;
  }
  .nav-content .display{
    display:block;
  }
  .margin_b{
    margin-bottom:10px;
  }
  .flex_b{
    display:flex;
    flex-direction:row;
  }
  .flex_b .score{
    flex:auto;
    text-align: center;
    width:110px;
    height:104px;
    line-height:104px;
    font-size:72px;
    color:#ff9800;
    font-weight:bold;
  }
  .flex_a{
    flex:auto;
    align-content:center;
  }
  .flex_a p{
    text-align:left;
    margin:5px 0;
    color:#888;
    font-size:28px;
  }
  .down-btn{
    width:2.9rem;
    height:0.8rem;
    line-height:0.8rem;
    background:#009688;
    color:#fff;
    margin:11px 15px 0 0;
  }
  .flex_b .head-portrait{
    width:80px;
    height:80px;
    border-radius:50%;
    background:#009688;
    margin:20px 20px;
  }
  .flex_a h3{
    font-size:28px;
    color:#666;
    text-align:left;
    margin:10px 0 6px;
    font-weight:bold;
  }
  .date{
    font-size:28px;
    color:#a0a0a0;
    margin:25px 30px auto 0;
    text-align:right;
  }
  .star-icon{
    width:30px;
    height:30px;
  }
  .comment-content{
    padding:0 0.26667rem 20px;
    font-size:28px;
    text-align:left;
    color:#666;
  }
  .rate{
    color:#009688;
  }
  .coms{
    padding-left:0.2667rem;
    padding-top: 10px;
    padding-bottom:20px;
  }
  .coms .all{
    width:120px;
    height:60px;
    border:1px solid #009688;
    background: #fff;
    color:#009688;
    margin-right:20px;
  }
  .coms .com{
    width:160px;
    height:60px;
    border:1px solid #e5e5e5;
    color:#888;
    background:#fff;
    margin-right:20px;
  }
</style>
